<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
	<style>
		a {
			text-decoration: none;
		}
		a:hover {
			text-decoration: none;
		}
		.img {
			display: flex;
			flex-wrap: wrap;
		}
		.img img{
			width: 210px;
			height: 210px;
			object-fit: cover;
			margin: 15px;
		}
		.form-control {
			height: auto;
		}
		#cboxClose{
			text-indent: 0;
			font-size: 50px;
			font-weight: bold;
			margin-top: 10px;
			color: red;
		}
		.ace-thumbnails li {
			margin: 0 10px;
		}
    </style>
	<div class="page-header">
		<h1><?=isset($notifyInfo) ? '编辑班级通知' : '发布班级通知'?></h1>
	</div>

	<div class="col-xs-12">
		<form class="form-horizontal" id="classes-form">
			<input type="hidden" name="id" value="<?= isset($notifyInfo['id']) ? $notifyInfo['id'] : 0 ?>" />
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">通知标题：</label>
				<div class="col-sm-6">
					<input class="form-control" type="text" name="notify_title" value="<?=isset($notifyInfo['notify_title']) ? $notifyInfo['notify_title'] : '' ?>" placeholder="请填写通知标题"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">紧急程度：</label>
				<div class="col-sm-6">
					<select class="form-control" name="notify_urgent">
						<option value="0">正常</option>
						<option value="1" style="color: red">紧急</option>
					</select>
				</div>
			</div>
			<div class="form-group hide" id="urgent-time-div">
				<label class="col-sm-3 control-label no-padding-right">通知截止时间：</label>
				<div class="col-sm-6">
					<input class="form-control" id="datetime-picker" type="text" name="urgent_endtime" value="<?= isset($notifyInfo['urgent_endtime']) ? $notifyInfo['urgent_endtime'] : date('Y-m-d H:i:s') ?>" placeholder="请选择紧急通知提醒结束时间"/>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">通知类型：</label>
				<div class="col-sm-6">
					<select class="form-control" name="notify_type">
						<option value="0" <?= isset($notifyInfo['notify_type']) && $notifyInfo['notify_type'] == NOTIFY_TYPE_TEXT ? 'selected' : '' ?> >文本通知</option>
						<option value="1" <?= isset($notifyInfo['notify_type']) && $notifyInfo['notify_type'] == NOTIFY_TYPE_LINK ? 'selected' : '' ?> >外部链接</option>
					</select>
				</div>
			</div>
			<div class="form-group <?= isset($notifyInfo['notify_type']) && $notifyInfo['notify_type'] == NOTIFY_TYPE_LINK ? '' : 'hide' ?>" id="link-div">
				<label class="col-sm-3 control-label no-padding-right">外部链接地址：</label>
				<div class="col-sm-6">
					<input class="form-control" type="text" name="external_link"" value="<?= isset($notifyInfo['external_link']) ? $notifyInfo['external_link'] : '' ?>" placeholder="请填写外部链接地址"/>
				</div>
			</div>
			<?php if($isSchoolAdmin): ?>
				<div class="form-group">
					<label class="col-sm-3 control-label no-padding-right">是否置顶：</label>
					<div class="col-sm-6">
						<select class="form-control" name="is_top">
							<option value="0">否</option>
							<option value="1" style="color: red">是</option>
						</select>
					</div>
				</div>
			<?php endif ?>
			
			<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right">发布班级：</label>
				<div class="col-sm-6">
					<?php foreach($gradeArray as $key => $grade): ?>
						<div class="well well-sm">
							<a class="blue select-grade" href="javascript:;" title="全选年级"><?=$key?> <span style="color: #999;margin-left: 5px">(点击选中全部班级)</span></a>
							<div class="mt5">
							<?php foreach($grade['class'] as $class): ?>
								<label class="inline checkbox-item mr20">
									<input class="ace" type="checkbox" name="notify_class" value="<?=$class['id']?>" />
									<span class="lbl"> <?=$class['class_name']?></span>
								</label>
							<?php endforeach; ?>
							</div>
						</div>
					<?php endforeach; ?>
				</div>
			</div>
			<div class="clearfix <?= isset($notifyInfo['notify_type']) && $notifyInfo['notify_type'] == NOTIFY_TYPE_LINK  ? '' : 'hide' ?>" id="submit-top">
				<div class="col-md-offset-3 col-md-9">
					<a class="btn btn-info submit">
						<i class="ace-icon fa fa-check"></i> 提交
					</a>
				</div>
			</div>
			<div <?= isset($notifyInfo['notify_type']) && $notifyInfo['notify_type'] == NOTIFY_TYPE_LINK  ? 'style="visibility:hidden;"' : '' ?> class="form-group" id="content-div">
				<label class="col-sm-3 control-label no-padding-right">通知内容：</label>
				<div class="col-sm-6">
					<textarea class="pd0" id="content" name="notify_content" style="height: 400px;width: 100%"><?= isset($notifyInfo['notify_content']) ? urldecode($notifyInfo['notify_content']) : '' ?></textarea>
				</div>
			</div>
			<!-- <div class="form-group <?= isset($notifyInfo['external_link']) && $notifyInfo['notify_type'] == NOTIFY_TYPE_LINK  ? 'hide' : '' ?>" id="content-div">
				<label class="col-sm-3 control-label no-padding-right">通知内容：</label>
				<div class="col-sm-6">
					<textarea class="pd0" id="content" name="notify_content" style="height: 400px;width: 100%"><?= isset($notifyInfo['notify_content']) ? urldecode($notifyInfo['notify_content']) : '' ?></textarea>
				</div>
			</div> -->
			<div class="form-group <?= isset($notifyInfo['notify_type']) && $notifyInfo['notify_type'] == NOTIFY_TYPE_LINK  ? 'hide' : '' ?>" id="img-div">
				<label class="col-sm-3 control-label no-padding-right">上传图片：</label>
				<div class="col-sm-6">
					<div class="form-control">
						<div class="img">
							<ul class="ace-thumbnails clearfix">
								<li>
									<a href="javascript:;" id="upload-img" style="height: 240px;">
										<img class="fit-cover" src="<?=$staticAdminUrl?>assets/images/upload.png" />
									</a>
								</li>
								<?php if(isset($notifyInfo['imgArr'])): ?>
									<?php foreach($notifyInfo['imgArr'] as $image): ?>
										<li>
											<a href="<?=$image?>" data-rel="colorbox" class="cboxElement">
												<img class="img-material" src="<?=$image?>" width="150" height="150" class="fit-cover">
												<div class="text">
													<div class="inner"></div>
												</div>
											</a>
											<div class="tools tools-bottom">
												<a href="javascript:;" class="red image-delete">
													<i class="ace-icon fa fa-trash"></i>
												</a>
											</div>
										</li>
									<?php endforeach; ?>
								<?php endif ?>		
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="clearfix <?= isset($notifyInfo['notify_type']) && $notifyInfo['notify_type'] == NOTIFY_TYPE_LINK  ? 'hide' : '' ?>" id="submit-bottom">
				<div class="col-md-offset-3 col-md-9">
					<a class="btn btn-info submit">
						<i class="ace-icon fa fa-check"></i> 提交
					</a>
				</div>
			</div>
		</form>
	</div>
<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<!-- 百度编辑器 -->
<script src="<?=$staticAdminUrl?>assets/ueditor/ueditor.config.js"></script>
<script src="<?=$staticAdminUrl?>assets/ueditor/ueditor.all.js"></script>
<script type="text/javascript">
	$(function(){
		// 紧急程度切换
		$("[name=notify_urgent]").change(function(){
			if($(this).val() == 1) $('#urgent-time-div').removeClass("hide");
			else $('#urgent-time-div').addClass("hide");
		})
		// 通知类型切换
		$("[name=notify_type]").change(function(){
			// 上传图片对象
			$("#upload-img").uploader({
				"multiple": true, // 多图上传
				"server":  '<?=UP_FORM_URL?>',
				"authorization": "<?=$signature?>",
				"policy": "<?=$policy?>",
				"callback": function(response) {
					var imgFile = "<?=UP_URL?>" + response.url;
					$(".ace-thumbnails").append('\
						<li>\
							<a href="' + imgFile + '" data-rel="colorbox" class="cboxElement">\
								<img class="img-material" src="' + imgFile + '" width="150" height="150" class="fit-cover">\
								<div class="text">\
									<div class="inner"></div>\
								</div>\
							</a>\
							<div class="tools tools-bottom">\
								<a href="javascript:;" class="red image-delete">\
									<i class="ace-icon fa fa-trash"></i>\
								</a>\
							</div>\
						</li>\
					');
					$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
				}
			});

			if($(this).val() == 1) {
				$('#link-div').removeClass("hide");
				// $('#content-div').addClass("hide");
				$('#content-div').css('visibility', 'hidden');
				$('#img-div').addClass("hide");
				$("#submit-top").removeClass("hide");
				$("#submit-bottom").addClass("hide");
			} else {
				$('#link-div').addClass("hide");
				// $('#content-div').removeClass("hide");
				$('#content-div').css('visibility', 'visible')
				$('#img-div').removeClass("hide");
				$("#submit-top").addClass("hide");
				$("#submit-bottom").removeClass("hide");
			}
		})
		<?php if(isset($notifyInfo) && !empty($notifyInfo)): ?>
			// 选中接收的班级
			var classArray = "<?=$notifyInfo['class_id']?>".split(",");
			// console.log(classArray);
			for(var i in classArray) {
				var notifyClass = $("[name=notify_class][value="+ classArray[i] +"]")[0];
				if(notifyClass) {
					notifyClass.checked = true;
				}
			}
			// 紧急程度
			$("[name=notify_urgent]").val("<?=$notifyInfo['notify_urgent']?>");
			<?php if($notifyInfo['notify_urgent']): ?>$('#urgent-time-div').removeClass("hide");<?php endif; ?>

			<?php if($isSchoolAdmin): ?>
				// 是否置顶
				$("[name=is_top]").val("<?=$notifyInfo['is_top']?>");
			<?php endif ?>	
		<?php endif; ?>

		// 日期时间选择器
		$('#datetime-picker').datetimepicker({
			format: 'YYYY-MM-DD HH:mm:ss',
			icons: {
				time: 'fa fa-clock-o',
				date: 'fa fa-calendar',
				up: 'fa fa-chevron-up',
				down: 'fa fa-chevron-down',
				previous: 'fa fa-chevron-left',
				next: 'fa fa-chevron-right',
				today: 'fa fa-arrows ',
				clear: 'fa fa-trash',
				close: 'fa fa-times'
			}
		}).next().on(ace.click_event, function(){
			$(this).prev().focus();
		});

		// 点击年级，全选下级班级
		var cancel = false;
		$(".select-grade").click(function(){
			// 第一选择，第二次取消选择
			if(cancel) {
				// 取消选择
				$(this).parent().find("[name=notify_class]").each(function(){
					$(this)[0].checked = false;
				});
				cancel = ! cancel;
			} else {
				// 选择
				$(this).parent().find("[name=notify_class]").each(function(){
					$(this)[0].checked = true;
				});
				cancel = ! cancel;
			}
		})

		// 初始化编辑器
		var ue = UE.getEditor('content');
		// // 提交表单
		// var form = $("#classes-form");
		// var submitUrl = "<?=admin_url('contents/save_notify_action')?>";
		// form_submit(form, submitUrl, function(res) {
		// 	tips_alert(res.msg, res.success, function(){
		// 		if(res.success) {
		// 			window.location.href = "<?=admin_url('contents/notify')?>";
		// 		}
		// 	});
		// });
		$(".submit").click(function() {
			var id = $("[name=id]").val();
			var notifyTitle = $("[name=notify_title]").val();
			var notifyClassArr = [];
			$("[name=notify_class]").each(function() {
				if($(this).prop("checked")) {
					notifyClassArr.push($(this).val());
				}
			});
			var notifyClass = notifyClassArr.join(',');
			var notifyContent = $("[name=notify_content]").val();
			var notifyUrgent = $("[name=notify_urgent]").val();
			var urgentEndtime = $("[name=urgent_endtime]").val();
			var imgArr = new Array();
			$(".ace-thumbnails .img-material").each(function() {
				if($(this).css('display') != 'none') {
					imgArr.push($(this).attr("src"));
				}
			});
			var notifyType = $("[name=notify_type]").val();
			var externalLink = $("[name=external_link]").val();
			<?php if($isSchoolAdmin): ?>
				var isTop = $("[name=is_top]").val();
			<?php else: ?>
				var isTop = "-1";
			<?php endif ?>		

			var url = "<?=admin_url('contents/save_notify_action')?>";
			var data = {
				"id": id,
				"notify_title": notifyTitle,
				"notify_class": notifyClass,
				"notify_content": notifyContent,
				"notify_urgent": notifyUrgent,
				"urgent_endtime": urgentEndtime,
				"material": imgArr,
				"notify_type": notifyType,
				'external_link': externalLink,
				"is_top": isTop
			};
			ajax_post(url, data, function() {
				window.location.href = "<?=admin_url('contents/notify')?>";
			});
		});
		// 上传图片对象
		$("#upload-img").uploader({
			"multiple": true, // 多图上传
			"server":  '<?=UP_FORM_URL?>',
			"authorization": "<?=$signature?>",
			"policy": "<?=$policy?>",
			"callback": function(response) {
				var imgFile = "<?=UP_URL?>" + response.url;
				$(".ace-thumbnails").append('\
					<li>\
						<a href="' + imgFile + '" data-rel="colorbox" class="cboxElement">\
							<img class="img-material" src="' + imgFile + '" width="150" height="150" class="fit-cover">\
							<div class="text">\
								<div class="inner"></div>\
							</div>\
						</a>\
						<div class="tools tools-bottom">\
							<a href="javascript:;" class="red image-delete">\
								<i class="ace-icon fa fa-trash"></i>\
							</a>\
						</div>\
					</li>\
				');
				$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
			}
		});
		// 图片轮播
		var colorbox_params = {
			rel: 'colorbox',
			reposition:true,
			scalePhotos:true,
			scrolling:false,
			previous:'<i class="ace-icon fa fa-arrow-left"></i>',
			next:'<i class="ace-icon fa fa-arrow-right"></i>',
			close:'&times;',
			current:'',
			maxWidth:'100%',
			maxHeight:'100%',
			onOpen:function(){
				$overflow = document.body.style.overflow;
				document.body.style.overflow = 'hidden';
			},
			onClosed:function(){
				document.body.style.overflow = $overflow;
			},
			onComplete:function(){
				$.colorbox.resize();
			}
		};
		$('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
		// 删除图片
		$("body").on("click", ".image-delete", function(e){
			var that = $(this);
			layer.confirm('确定删除该图片吗？', function(index){
				that.parents("li").find(".img-material").hide();
				layer.close(index);
			});
		})
	})
</script>